import makeStyles from '@mui/styles/makeStyles';
import { graphql, useFragment } from 'react-relay';
import React, { FunctionComponent } from 'react';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Chip from '@mui/material/Chip';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import { ViewModuleOutlined } from '@mui/icons-material';
import ListItemText from '@mui/material/ListItemText';
import StixDomainObjectNestedEntities from '../../common/stix_domain_objects/StixDomainObjectNestedEntities';
import type { Theme } from '../../../../components/Theme';
import { MalwareAnalysisDetails_malwareAnalysis$key } from './__generated__/MalwareAnalysisDetails_malwareAnalysis.graphql';
import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
import { useFormatter } from '../../../../components/i18n';
import { emptyFilled } from '../../../../utils/String';

// Deprecated - https://mui.com/system/styles/basics/
// Do not use it for new code.
const useStyles = makeStyles<Theme>((theme) => ({
  paper: {
    margin: '10px 0 0 0',
    padding: '15px',
    borderRadius: 4,
  },
  chip: {
    fontSize: 12,
    lineHeight: '12px',
    backgroundColor: theme.palette.background.accent,
    color: theme.palette.text?.primary,
    textTransform: 'uppercase',
    borderRadius: 4,
    margin: '0 5px 5px 0',
  },
}));

const MalwareAnalysisDetailsFragment = graphql`
  fragment MalwareAnalysisDetails_malwareAnalysis on MalwareAnalysis {
    id
    product
    result_name
    result
    submitted
    analysis_started
    analysis_ended
    version
    configuration_version
    analysis_engine_version
    analysis_definition_version
    modules
    creators {
      id
      name
    }
    objectLabel {
      id
      value
      color
    }
  }
`;

interface MalwareAnalysisDetailsProps {
  malwareAnalysisFragment: MalwareAnalysisDetails_malwareAnalysis$key;
}

const MalwareAnalysisDetails: FunctionComponent<
MalwareAnalysisDetailsProps
> = ({ malwareAnalysisFragment }) => {
  const { t_i18n, fldt } = useFormatter();
  const classes = useStyles();
  const data = useFragment(
    MalwareAnalysisDetailsFragment,
    malwareAnalysisFragment,
  );
  return (
    <div style={{ height: '100%' }}>
      <Typography variant="h4" gutterBottom={true}>
        {t_i18n('Details')}
      </Typography>
      <Paper classes={{ root: classes.paper }} className={'paper-for-grid'} variant="outlined">
        <Grid container={true} spacing={3}>
          <Grid item xs={6}>
            <Typography variant="h3" gutterBottom={true}>
              {t_i18n('Product')}
            </Typography>
            <ExpandableMarkdown source={data.product} limit={300} />
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Report name')}
            </Typography>
            <ExpandableMarkdown source={data.result_name} limit={300} />
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Maliciousness')}
            </Typography>
            <Chip
              key={data.result}
              classes={{ root: classes.chip }}
              label={emptyFilled(data.result)}
            />
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Version of the product')}
            </Typography>
            <ExpandableMarkdown source={data.version} limit={300} />
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Configuration version')}
            </Typography>
            <ExpandableMarkdown
              source={data.configuration_version}
              limit={300}
            />
          </Grid>
          <Grid item xs={6}>
            <Typography variant="h3" gutterBottom={true}>
              {t_i18n('Submission date')}
            </Typography>
            {fldt(data.submitted)}
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Analysis started')}
            </Typography>
            {fldt(data.analysis_started)}
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Analysis ended')}
            </Typography>
            {fldt(data.analysis_ended)}
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Analysis engine version')}
            </Typography>
            <ExpandableMarkdown
              source={data.analysis_engine_version}
              limit={300}
            />
            <Typography
              variant="h3"
              gutterBottom={true}
              style={{ marginTop: 20 }}
            >
              {t_i18n('Analysis definition version')}
            </Typography>
            <ExpandableMarkdown
              source={data.analysis_definition_version}
              limit={300}
            />
          </Grid>
        </Grid>
        <Typography variant="h3" gutterBottom={true} style={{ marginTop: 20 }}>
          {t_i18n('Modules')}
        </Typography>
        <List>
          {(data.modules ?? []).map((module, index) => (
            <ListItem key={`${index}:${module}`} dense={true} divider={true}>
              <ListItemIcon>
                <ViewModuleOutlined />
              </ListItemIcon>
              <ListItemText primary={module} />
            </ListItem>
          ))}
        </List>
        <StixDomainObjectNestedEntities
          entityId={data.id}
          entityType="Malware-Analysis"
          targetStixCoreObjectTypes={['Stix-Cyber-Observable']}
        />
      </Paper>
    </div>
  );
};

export default MalwareAnalysisDetails;
